<!--
 * @Description: 供应链首页
 * @Author: Kerwin
 * @Date: 2025-07-28 15:59:07
 * @LastEditTime: 2025-09-29 15:52:21
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="supply">
    <!-- 头部 -->
    <view class="header"> </view>
    <!-- 中间内容 -->
    <view class="body">
      <swiper
        class="swiper"
        :circular="false"
        :current="current"
        @change="swiperChange"
        duration="300"
      >
        <!-- #ifdef H5 -->
        <template v-for="(item, index) in swipers" :key="item">
          <swiper-item>
            <template v-if="loadMap.get(index)">
              <component
                :is="item.component"
                v-bind="getComponentProps(item.component)"
              >
              </component>
            </template>
          </swiper-item>
        </template>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <HOME v-if="loadMap.get(0)" />
        <CATEGORY v-if="loadMap.get(1)" />

        <CAR v-if="loadMap.get(2)" />
        <!-- <MY v-if="loadMap.get(3)" /> -->
        <!-- #endif -->
      </swiper>
    </view>
    <!-- 底部 -->
    <view class="tabbar" style="margin-left: -20rpx; margin-right: -20rpx">
      <!-- <hy-tabbar bgColor="#fff"></hy-tabbar> -->
      <c_tabbar
        ref="tabbarRef"
        @change="tabChange"
        :current="current"
      ></c_tabbar>
    </view>
  </view>
</template>

<script setup lang="ts">
import { watch, reactive, ref, markRaw } from 'vue'
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'

// 组件
import HOME from '../home/index.vue'
import CATEGORY from '../category/index.vue'
import CAR from '../car/index.vue'
import MY from '../my/index.vue'
import c_tabbar from '../tabbar/index.vue'
//api
import { baseApi, userApi, enumAll, orderApi } from '@/api'
import { userGylCarStore, useUserStore } from '@/store'
// 初始化数据
const keyword = ref('')
const iconTitle = ['正品保障', '品类齐全', '全球好货', '底价供货']
const goodsList = ref<any>([])
const hyType = ref<any>({})
const SupplyheaderList = ref<any>([])
const current = ref(0)
const tabbarRef = ref() //tabbar
const loadMap = reactive(new Map())
const userStore = useUserStore()
// #region ************ 切换中间内容 ********************** */
const swiperChange = (e: any) => {
  const { current } = e.detail
  tabbarRef.value.setTabIndex(current)
  loadDetector(current)
}
const swipers = markRaw([
  {
    component: HOME
  },
  {
    component: CATEGORY
  }
  // {
  //   component: CAR
  // }
  // {
  //   component: MY
  // }
])
loadMap.set(0, true)
watch(current, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    loadDetector(newVal)
  }
})
const loadDetector = (index: number) => {
  loadMap.set(index, true)
}

const getComponentProps = (componentName: any) => {
  if (componentName === CAR) {
    return { tabberStatus: true }
  }
  return {}
}
//#endregion

// #region ************ 基础信息 ********************** */
//用户信息
async function getUserInfo() {
  const { data } = await userApi.userInfo()
  userStore.syncSetUserInfo(data)
  console.log('用户信息', data)
  // userData.value.name = data.nickname
  // userData.value.phone = data.phone
}

// #endregion

// #region ************ tabbar ********************** */
const tabChange = (index: number) => {
  current.value = index
}
//#endregion
onLoad((options: any) => {
  getUserInfo()
  if (options?.tab) {
    current.value = Math.round(options.tab)
  }

  if (options?.mode) {
    uni.setStorageSync('shopMode', options?.mode)
  }
})
</script>

<style lang="scss" scoped>
.supply {
  position: relative;
  min-height: 100%;
  .body {
    .swiper {
      // padding: 20rpx;
      height: calc(100vh - 100rpx);
    }
  }
  .tabbar {
    width: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
  }
}

:deep(.u-content) {
  width: 50% !important;
}
</style>
